<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--url是请求数据的地址-->
<table class="easyui-datagrid" id="mood-datagrid">
</table>
<div id="mood-datagrid-toolbar">
    <div>
        ID：<input type="text" class="easyui-numberbox" id="search-mood-id"/>
        发布时间：<input class="easyui-datebox" id="search-mood-startDate"/>-
        <input class="easyui-datebox" id="search-mood-endDate"/>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search"
           onclick="doMoodSearch()">搜索</a>
    </div>
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="doEditMood()">新增</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" plain="true" onclick="doDeleteMood()">删除</a>
</div>
<div class="easyui-dialog" href="<%=request.getContextPath()%>/mood_edit.jsp" closed="true" id="add-mood-dialog"
     modal="true" title="编辑" style="width:500px;height:400px;padding-top:30px" buttons="#dlg-mood-buttons">
</div>
<div id="dlg-mood-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitMood()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#edit-mood-form').form('reset');">重填</a>
</div>
<script type="text/javascript">
    $(function () {
        $("#mood-datagrid").datagrid({
            url: '/mood.html?act=list',
            singleSelect: true,
            pagination: true,
            nowrap: false,
            toolbar: "#mood-datagrid-toolbar",
            columns: [[
                {field: 'id', title: 'ID', width: 80},
                {
                    field: 'content', title: '内容', width: 280, formatter: function (val, row) {
                    return '<div style="word-break:break-all;">' + val + '</div>'
                }
                },
                {field: 'createdDate', title: '创建时间', width: 160},
                {
                    field: 'status', title: '状态', width: 80, formatter: function (val, row) {
                    switch (row.status) {
                        case 0:
                            return "<span style='color:#ff0200'>无效</span>";
                        case 1:
                            return "<span style='color:#00cf4d'>有效</span>";
                    }
                }
                }
            ]]
        })
    })

    function doEditMood() {
        $('#edit-mood-form').form('clear');
        $("#add-mood-dialog").dialog("open");
    }

    function doMoodSearch() {
        var queryParams = $('#mood-datagrid').datagrid('options').queryParams;
        queryParams.id = $("#search-mood-id").val();
        queryParams.startDate = $("#search-mood-startDate").datebox("getValue");
        queryParams.endDate = $("#search-mood-endDate").datebox("getValue");
        //重新加载datagrid
        $("#mood-datagrid").datagrid('reload');
    }

    function submitMood() {
        $('#edit-mood-form').form('submit', {
            onSubmit: function () {
                if ($(this).form('enableValidation').form('validate')) {
                    $.ajax({
                        url: "<%=request.getContextPath()%>/mood.html?act=add",
                        data: $("#edit-mood-form").serialize(),
                        method: "post",
                        success: function (data) {
                            if (data.status) {
                                $("#mood-datagrid").datagrid('reload');
                                $("#add-mood-dialog").dialog("close");
                                $('#edit-mood-form').form('clear');
                            } else {
                                alert(data.message)
                            }
                        }
                    })
                }
                return false;
            }
        });
    }

    function doDeleteMood() {
        var row = $('#mood-datagrid').datagrid('getSelected');
        if (row == null) {
            return;
        }
        if (confirm("确定要删除吗？")) {
            $.ajax({
                url: "<%=request.getContextPath()%>/mood.html?act=delete",
                data: "id=" + row.id,
                method: "post",
                success: function (data) {
                    if (data.status) {
                        $("#mood-datagrid").datagrid('reload');
                    } else {
                        alert(data.message)
                    }
                }
            })
        }
    }
</script>